/* eslint  react/no-string-refs: 0 */
import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Input, Grid, Form, Select,Message, Balloon, Icon } from '@alifd/next';
import {inject} from 'mobx-react';
import './EditForm.scss';
import { ApiOfMetricGroupCreate, ApiOfMetricGroupUpdate } from '#/utils/coreApiDefine'

const { Row, Col } = Grid;
const FormItem = Form.Item;

const formItemLayout = {
  labelCol: { xxs: 6, s: 3, l: 4 },
  wrapperCol: { s: 12, l: 12 }
};

const configFieldLabel = (<span>
    扩展配置：<Balloon type="primary" trigger={<Icon type="help" size="small" />} closable={false}>
      <pre>
        {`自定义协议时使用。指定协议名称。如：
{"protocolName":"Sql"}
`}    </pre>
  </Balloon>
</span>);

@inject('dictstore')
export default class SettingsForm extends Component {
  static displayName = 'EditForm';
  static propTypes = {};
  static defaultProps = {};

  constructor(props) {
    super(props);
    let formData = { ...this.props.formData };
    this.state = {
      value: {
        id: formData.id,
        name: formData.name,
        code: formData.code,
        protocol: formData.protocol,
        usageType: formData.usageType,
        config: !!formData.config ? formData.config : '',
        //executionCycle: formData.executionCycle,
        comment: formData.comment
      },
    };
  }

  formChange = (value) => {
    this.setState({
      value,
    });
  };

  validateAllFormField = (values, errors) => {
    let that = this;
    if (!errors) {
      if(!!values.config) {
        let isJSON = true;
        try {
          JSON.parse(values.config)
        } catch(e) {
          isJSON = false
        }
        if(!isJSON) {
          Message.error('扩展配置格式不正确！');
          return;
        }
      }
      let updated = values.id !== undefined;
      if (updated) {
        ApiOfMetricGroupUpdate(values.code, values).then(() => that.props.submitCallback('success'))
      } else {
        ApiOfMetricGroupCreate(values).then(() => that.props.submitCallback('success'))
      }
    } else {
      // 处理表单报错
    }
  };

  render() {
    return (
      <div className="settings-form">
        <IceContainer>
          <Form
            value={this.state.value}
            onChange={this.formChange}
            ref="form"
          >
            <div style={styles.formContent}>
              <Input name="id" htmlType="hidden" />
              <FormItem size="medium" label="名称：" {...formItemLayout} required maxLength={30} requiredMessage="必填">
                <Input name="name" placeholder="指标组名称" />
              </FormItem>
              <FormItem size="medium" label="编码：" {...formItemLayout}>
                <Input name="code" disabled={true} placeholder="指标组编码" />
              </FormItem>
              <FormItem size="medium" label="协议：" {...formItemLayout} required requiredMessage="必填">
                <Select name="protocol" dataSource={this.props.dictstore.ProtocolDS} hasClear={true} style={{ width: '100%' }} />
              </FormItem>
              <FormItem size="medium" label="用途：" {...formItemLayout} required requiredMessage="必填">
                <Select name="usageType" dataSource={this.props.dictstore.MetricUsageTypeDS} hasClear={true} style={{ width: '100%' }} />
              </FormItem>
              {/*<FormItem size="medium" label="周期：" {...formItemLayout} required requiredMessage="必填">
                <Input name="executionCycle" htmlType="number" placeholder="采集周期" />
              </FormItem>*/}
              <FormItem size="medium" label={configFieldLabel} {...formItemLayout} >
                <Input.TextArea name="config" placeholder="{... ...}" />
              </FormItem>
              <FormItem size="medium" label="注释" {...formItemLayout}>
                <Input.TextArea name="comment"  placeholder="注释" />
              </FormItem>
              <Row style={{ marginTop: 20 }}>
                <Col offset="3">
                  <Form.Submit
                    size="medium"
                    type="primary"
                    style={{ width: 100 }}
                    validate
                    onClick={this.validateAllFormField}
                  >
                    保 存
              </Form.Submit>
                </Col>
              </Row>
            </div>
          </Form>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  label: {
    textAlign: 'right',
  },
  formContent: {
    width: '100%',
    position: 'relative',
  },
  formItem: {
    alignItems: 'center',
    marginBottom: 25,
  },
  formTitle: {
    margin: '0 0 20px',
    paddingBottom: '10px',
    borderBottom: '1px solid #eee',
  },
};
